<script lang="ts" setup>
//合同设置
import { ref, computed, inject, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import Agreement_Set from '../views/Agreement_Set.vue'
const axios = inject('axios') //注入 axios
// 获取路由信息
const route = useRoute();
// 创建路由对象，用于编程式导航
const router = useRouter()

const work = ref({
  wname: '', //剧本名称
  typeID: '',  //类型
  copyright: '', //版权登记号
  record: '',  //备案号
  Time:'', //授权时长
  platform:'',  //授权平台
  age_limit:'', //授权年限
  Authorization_fee:''  //授权费用

}); // 示例数据

// 获取剧本信息
// const fetchBookInfo = async (id) => {
//   const WID = id;
//   console.log("合同=》获取到的剧本id：" + JSON.stringify(WID, null, 2));
//   try {
//     const response = await axios.get(`http://localhost:8080/api/getwork/${WID}`); // 替换为实际的API端点
//     work.value = response.data; // 假设后端返回的对象结构与book对象一致
//     console.log("获取剧本信息成功：" + JSON.stringify(work.value, null, 2));
//     //获取封面
    
//   } catch (error) {
//     console.error('Error fetching book info:', error);
//   }
// };


// 获取剧本信息
// const fetchBookInfo = async (id) => {
//   const WID = id;
//   console.log("获取到的剧本id：" + JSON.stringify(WID, null, 2));
//   try {
//     const response = await axios.get(`http://localhost:8080/api/getwork/${WID}`); // 替换为实际的API端点
//     work.value = response.data; // 假设后端返回的对象结构与book对象一致
//     console.log("获取剧本信息成功：" + JSON.stringify(work.value, null, 2));
//     //获取封面
//     // 仅在用户上传新头像后更新 
//     console.log("work.value.wimage：" + work.value.wimage)
//     if (work.value.wimage) {
//       work.wimage = work.value.wimage; // 保留用户头像的值
//       imageBasePath.value = 'http://localhost:8080/api/images/' + work.value.wimage;
//     }
    
//   } catch (error) {
//     console.error('Error fetching book info:', error);
//   }
// };



const goToworkSetting = () => {
  router.push({ name: 'WorkSetting'}); // 跳转到合同设置页面
};


const goToContractSettings = () => {
  router.push({ name: 'ContractSettings' }); // 跳转到合同设置页面
};

// 页面挂载后获取书籍信息
onMounted(() => {
  // fetchBookInfo(route.params.id);
});
</script>

<template>
  <div class="setting-container">
    <div class="sidebar">
      <el-menu default-active="2" mode="horizontal">
        <el-menu-item index="1" @click="goToworkSetting">作品设置</el-menu-item>
        <el-menu-item index="2"  @click="goToContractSettings">合同设置</el-menu-item>
      </el-menu>
    </div >
    <div class="agreement-container">
      <Agreement_Set style="height: 100%;width: 100%;"/>
    </div>


  </div>
</template>

<style scoped>
.setting-container {
  background-color: #fef5e9;
  width: 100%;
  height: 100%;
  /* display: flex;
  padding: 16px; */
}
.agreement-container {
  width: 100%;
  max-width: 100%;
  flex: 1; /* 让 agreement-container 自适应宽度 */
  /* height: calc(100vh - 64px); 减去 sidebar 和 menu 的高度，确保页面完整显示 */
  height: 91.5%;
  overflow-y: auto; /* 当内容溢出时显示垂直滚动条 */
  /*padding: 16px;  添加一些内边距，用于美观 */
  background-color: #fff; /* 背景色 */
}

</style>